<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Real Plot a Real Estates Category Bootstrap Responsive Website Template | Home :: w3layouts</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Real Plot Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<!--fonts-->
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!--//fonts-->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!--light-box-files -->
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.chocolat.js"></script>
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
<!--//light-box-files -->
		<script type="text/javascript">
		$(function() {
			$('.gallery a').Chocolat();
		});
		</script>
<!-- //js -->
<script src="js/responsiveslides.min.js"></script>
		<script>
				$(function () {
					$("#slider").responsiveSlides({
						auto: true,
						pager: true,
						nav: true,
						speed: 1000,
						namespace: "callbacks",
						before: function () {
							$('.events').append("<li>before event fired.</li>");
						},
						after: function () {
							$('.events').append("<li>after event fired.</li>");
						}
					});
				});
			</script>
			

<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
<!--Header-->
	<div class="header">
		<!--Top-Bar-->	
				<c:import url="/shared/head.jsp"></c:import>
		<!--//Top-Bar-->
		
		<!--Slider-->
		<div class="slider">
			<div class="callbacks_container">
				<ul class="rslides" id="bb">
					<li>
						<div class="slider-img">
							<img src="images/bannerteacher.jpg" class="img-responsive" alt="Real Plot">
						</div>
						<div class="slider-info">
							<span class="italic">Neque porro quisquam </span>
							<h4> 孩子喜欢老师好</h4>
							<h3>在线辅导更有效</h3>
						    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>						
						</div>
					</li>
				</ul>
				
			</div>
			<div class="clearfix"></div>
		</div>
		<!--//Slider-->
	</div>
<!--//Header-->
<!--offer-->
<div class="offer-w3layouts" id="about">
	<div class="container">
		<div class="offer-header-agile">
			<h3 class="tittle">大数据驱动 <span>学习</span></h3>
			<p>课前到课后全程精细分析 学习效率翻番</p></div>
			<div class="row">
				<div class="col-md-4 offer-grid ">
					<div class="icon">
						<i class="fa fa-star-o" aria-hidden="true"></i>
					</div>
					<h4>海量数据</h4>
					<p>2700万学生学习数据 比学校更懂你</p>
					<div class="readmore-w3"><a class="readmore" href="#" data-toggle="modal" data-target="#myModal2">Read More</a></div>
						<!-- Modal2 -->
						<div class="modal fade" id="myModal2" role="dialog">
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h5>知识点筛选</h5>
										<p>精细分析学生薄弱点 针对性教学</p></div>
								</div>
							</div>
						</div>
						<!-- //Modal2 -->
				</div>
			<div class="col-md-4 offer-grid ">
					<div class="icon">
						<i class="fa fa-map-o" aria-hidden="true"></i>
					</div>
					<h4>题目挑选</h4>
					<p>智能挑选题目 只做有价值的题</p>
					<div class="readmore-w3"><a class="readmore" href="#" data-toggle="modal" data-target="#myModal2">Read More</a></div>
				</div>
				<div class="col-md-4 offer-grid ">
					<div class="icon">
						<i class="fa fa-university" aria-hidden="true"></i>
					</div>
					<h4>随堂测试</h4>
					<p>课上随学随测 当堂解决遗漏知识点</p><div class="readmore-w3"><a class="readmore" href="#" data-toggle="modal" data-target="#myModal2">Read More</a></div>
				</div>
				<div class="clearfix"></div>
			</div>
	</div>
</div>
<!--//offer-->
<!--/team-->
	<div class="team" id="team">
		<div class="container"> 
			<h3 class="tittle">我们的 <span>教师团队</span></h3>
			<div class="main">
			<c:forEach var="teacher" items="${teachers}">
		<div class="col-md-3 team-sec wow fadeInLeft animated animated" data-wow-delay=".5s">
				<div class="view fifth-effect">
					 <a href="#" title="Full Image"><img src="images/${teacher.timage }" alt="image" /></a>
					 <div class="mask"></div>					  
				</div>  
				 <div class="clearfix"></div>
				<div class="team-grid">
							   <h4>${teacher.tname}</h4>
							   <p>${teacher.tdescription}</p>
						  </div>	
				  </div>	
				  </c:forEach>		
			   <div class="clearfix"></div>
			</div>
	   </div>
	</div>
<!--//team-->
<!--services-->
<div class="services-agileits" id="service">
	<div class="services-info">
		<!--Slider-->
		<div class="slider">
			<div class="callbacks_container">
				<ul class="rslides" id="slider">
					<c:forEach var="course" items="${courses}">
					<li>
						<div class="slider-img">
							<img src="images/${course.cimages}" class="img-responsive" alt="Real Plot">
						</div>	
						<div class="slider-info" id="courseInfo">
							<span class="italic" id="citalic"> ${course.cname}</span>
							<h4> ${course.cteacher}</h4>
							<h3>$ ${course.cprice }</h3>
							<p>${course.ccontent }</p>
						</div>	
					</li>
					</c:forEach>										
				</ul>			
			</div>
			
			<div class="clearfix"></div>
		</div>
		<!--//Slider-->
		<div class="clearfix"></div>
	</div>
</div>	
<!--//services-->
<!--footer-->
<div class="footer">
		<div class="footer-head-agile">
			<ul>
				<li class="contact-agile"><span class="fa-icon-w3"><i class="fa fa-phone" aria-hidden="true"></i></span>CALL NOW : 040 123456 789</li>
				<li class="logo-w3ls"><h2><a  href="index.html">Real Plot</a></h2></li>
				<li class="mail"><span class="fa-icon-w3"><i class="fa fa-envelope" aria-hidden="true"></i></span>MAIL : <a href="mailto:info@example.com">INFO@EXAMPLE.COM</a></li>
			</ul>
		</div>
		<label></label>
	<div class="container">
		<div class="footer-content-agile">					
			<div class="clearfix"> </div>
			<div class="copy">
		        <p>© 2016 Real Plot . All Rights Reserved | Design by <a href="http://w3layouts.com/">W3layouts</a> </p>
		    </div>
		</div>
	</div>
</div>
<!--/footer -->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
</body>
</html>